<template>
  <user-card-list :user-list="userList"/>
  <van-empty v-if="!userList || userList.length < 1" description="搜索结果为空" />


</template>


<script setup lang="ts">
import {onMounted, ref} from 'vue';
import {Toast} from 'vant';
import {useRoute, useRouter} from "vue-router";
import myAxios from "../plugins/myAxios";
import qs from 'qs';
import UserCardList from "../components/UserCardList.vue";

const route = useRoute();
const {tags} = route.query;

const userList = ref([]);

onMounted(async () => {
  const userListData = await myAxios.get('/user/search/tags', {// Make a request for a user with a given ID
    params: {
      tagNameList: tags
    },
    // paramsSerializer: params => {
    //   return qs.stringify(params,{indices:false})
    // }
    paramsSerializer: {
      serialize: function (params) {
        return qs.stringify(params, {indices: false})
      }
    }
  })
      .then(function (response) {
        // handle success
        console.log('/user/search/tags succeed', response);
        return response ?.data;
      })
      .catch(function (error) {
        // handle error
        console.error('/user/search/tags error', error);
        Toast.fail('失败')
      })

  if (userListData) {
    userListData.forEach((user: { tags: string; }) => {
      if (user.tags){
        user.tags = JSON.parse(user.tags);
      }
    })
    userList.value = userListData;
  }


})


// const mockUser = {
//   id: 778,
//   username: 'string',
//   userAccount: 'strin',
//   avatarUrl: 'http://img.faloo.com/NovelNode/0x0/1/1733/1733767.gif',
//   profile: '实弹发射分散asdfadf,阿的说法撒旦法，阿斯顿发生发顺丰，按时发散',
//   gender: 0,
//   phone: '4234242343',
//   email: 'dsrt4533s',
//   userRole: 0,
//   planetCode: 64,
//   tags: ['java', 'emo', '等的飞洒'],
//   createTime: new Date(),
// }

</script>

<style scoped>
.homeWrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>